<template>
  <el-container>
    <el-main>
      <div class="mbx p-4">
        <template>
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <div>
                  <el-statistic title="比例">
                    <template slot="formatter"> 456/2 </template>
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    decimal-separator="."
                    :value="value1"
                    :title="title"
                  >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    decimal-separator="."
                    :value="value1"
                    :title="title"
                  >
                  </el-statistic>
                </div>
              </el-col>
              <el-col :span="6">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    decimal-separator="."
                    :value="value1"
                    :title="title"
                  >
                  </el-statistic>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
      </div>
      <div class="mbx mt-4 p-4">
        <h4 class="pb-2">{{ hot }}</h4>

        <template>
          <div>
            <ul>
              <li v-for="(item, index) in arrData" :key="index">
                <!-- <span>{{ item.wid }}</span> -->
                <router-link
                  :to="{ path: '/details', query: { id: item.wid } }"
                  >{{ item.title }}</router-link
                >
                <el-divider></el-divider>
              </li>
            </ul>
          </div>
        </template>
      </div>
      <div class="mbx mt-4 p-4"></div>
    </el-main>
  </el-container>
</template>
 


<script>
const axios = require("axios");

export default {
  name: "MyIndex",
  data() {
    return {
      hot: "热门文章",

      arrData: [],
      wid: "",
      title: "",
      content: "",

      value1: 4154.564,
      title: "增长",
    };
  },
  methods: {
    index() {
      this.$axios
        .get("http://127.0.0.1/user/index")
        .then((res) => {
          //console.log(res.data);
          this.arrData = res.data;
        })
        .catch((err) => {
          this.$message.error('未知错误！');
        });
    },
  },
  mounted() {
    this.index();
  },
};
</script>

<style>
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>